{% stylesheet %}
.block_coupon .block_coupon_list ul {
  display: grid;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.block_coupon .block_coupon_list ul li {
  width: calc(50% - 15px);
  overflow: hidden;
  margin-bottom: 30px;
  margin-right: 15px;
}

.block_coupon .block_coupon_list ul li:nth-child(2n) {
  margin-left: 15px;
  margin-right: 0;
}

.block_coupon .block_coupon_content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 150px;
  border-radius: 10px;
  box-sizing: border-box;
  position: relative;
}

.block_coupon .block_coupon_content:before,
.block_coupon .block_coupon_content:after {
  content: '';
  width: 30px;
  height: 30px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
}

.block_coupon .block_coupon_content:before {
  left: -15px;
}

.block_coupon .block_coupon_content:after {
  right: -15px;
}

.block_coupon .block_coupon_left {
  width: 180px;
  text-align: center;
  font-size: 25px;
  padding: 0 30px;
  box-sizing: border-box;
}

.block_coupon .block_coupon_left span {
  font-weight: bold;
  display: block;
}

.block_coupon .block_coupon_right {
  width: calc(100% - 100px);
  padding: 0 20px;
  border-left: 1px dashed;
  box-sizing: border-box;
}

.block_coupon .block_coupon_title {
  font-weight: bold;
  margin-bottom: 10px;
}

.block_coupon .block_coupon_time {
  display: flex;
  align-items: center;
  color: var(--coupon-color-07);
  margin-bottom: 15px;
}

.block_coupon .block_coupon_time svg {
  fill: var(--coupon-color-07);
  margin-right: 5px;
  opacity: 0.7;
}

.block_coupon .block_coupon_code {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  height: 36px;
}

.block_coupon .block_coupon_code span {
  max-width: calc(100% - 80px);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.block_coupon .block_coupon_code svg {
  fill: #fff;
  margin-left: 15px;
}

.block_coupon_right-fake {
  background: var(--page_background_color);
  border: 1px solid var(--border-color);
  content: '';
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  margin-top: -11px;
}

.block_coupon_right-before {
  left: -11px;
}

.block_coupon_right-after {
  right: -11px;
}

.block_coupon .block_coupon_content:before, .block_coupon .block_coupon_content:after {
  content: none;
}

@media screen and (max-width: 768px) {
  .block_coupon .block_coupon_left {
    width: 100px;
    font-size: 18px;
    padding: 0 0 0 20px;
  }
  .block_coupon .block_coupon_right {
    font-size: 12px;
  }
}

@media screen and (max-width: 767px) {
  .block_coupon .block_coupon_left {
    font-size: 16px;
    padding: 0 10px 0 20px;
    width: 110px;
  }
  .block_coupon .block_coupon_time,
  .block_coupon .block_coupon_title {
    font-size: 12px;
    margin-bottom: 10px;
  }
  .block_coupon .block_coupon_content {
    height: 130px;
  }
  .block_coupon .block_coupon_right {
    width: calc(100% - 80px);
    padding: 0 20px 0 10px;
  }
  .block_coupon .block_coupon_code {
    height: 30px;
    font-size: 12px;
  }
  .block_coupon .block_coupon_list ul li {
    margin: 0 0 15px 0 !important;
    width: 100%;
  }
  .block_coupon .block_coupon_list ul li:last-child {
    margin-bottom: 0 !important;
  }
  .block_coupon .block_coupon_list ul li .block_coupon_right-fake {
    width: 22px;
    height: 22px;
  }
}

{% endstylesheet %}




{% assign  color_style_array =  section.settings.color_style | split : "," %}

{% assign replace_str =  color_style_array.last %}

<div class="block_coupon">
    <div class="container_wrapper">
        {% include 'block_title', title:section.settings.title , detail:section.settings.detail %}

        {% assign block_coupon_ids = section.blocks | get_array_values: "coupon.id" | join: "," %}
        {% get_coupons coupon_ids = {block_coupon_ids} limit=100 %}
        <div class="block_coupon_list">
            <ul>
                {% if section.blocks.size %}
                {% for block in section.blocks %}
                
                {% if coupons[block.coupon.id] %}
                  {% assign block_coupon = coupons[block.coupon.id]  %}
                  <li>
                    <div class="block_coupon_content"  style='border: 1px solid {{ section.settings.color_style | replace:replace_str, ".2)" }};background: {{ section.settings.color_style | replace:replace_str, ".04)" }};color: {{ section.settings.color_style }};--border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }}'>
                        
                        <div class="block_coupon_left">
                            {% if block_coupon.rule.discount.type == "1" %}
                            <span>{{ block_coupon.rule.discount.value }}%</span> OFF

                            {% else %}
                            <span>{{ block_coupon.rule.discount.value | money }}</span> 
                            {% comment %} OFF {% endcomment %}
                            {% endif %}
                        </div>
                        <div class="block_coupon_right" style='border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }};'>

                            <div class="block_coupon_right-fake block_coupon_right-before"></div>
                            <div class="block_coupon_right-fake block_coupon_right-after"></div>
                        
                            <div class="block_coupon_title">{{ block_coupon.coupon_name }}</div>
                            <div class="block_coupon_time" style='color:{{ section.settings.color_style | replace:replace_str, ".7)" }};'>
                                {% include icon_coupon_time ,{width:'16',height:'16',fill:section.settings.color_style | replace:replace_str, ".5)"} %}
                                {% if block_coupon.ends_at == -1 %}
                                <span>{{lang.coupon.no_expiration_date}}</span>
                                {% else %}
                                <span class="format-date" data-date="{{block_coupon.created_at}}" data-format="YYYY-mm-dd">{{ block_coupon.starts_at | date: "%Y-%m-%d" }}<span> ~ <span class="format-date" data-date="{{block_coupon.ends_at}}" data-format="YYYY-mm-dd">{{ block_coupon.ends_at | date: "%Y-%m-%d" }}</span>
                                {% endif %}
                            </div>
                            <div class="block_coupon_code"  data-clipboard-text="{{ block_coupon.coupon_code }}" style="cursor: pointer;background-color: {{ section.settings.color_style }};">
                                <span>{{ block_coupon.coupon_code }}</span>
                                {% include icon_coupon_copy ,{width:'16',height:'16'} %}
                            </div>
                        </div>
                    </div>
                  </li>
                {% else %}
                <li>
                    <div class="block_coupon_content"  style='border: 1px solid {{ section.settings.color_style | replace:replace_str, ".2)" }};background: {{ section.settings.color_style | replace:replace_str, ".04)" }};color: {{ section.settings.color_style }};--border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }}'>
                        
                        <div class="block_coupon_left"><span>50%</span> OFF</div>
                        <div class="block_coupon_right" style='border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }};'>

                            <div class="block_coupon_right-fake block_coupon_right-before"></div>
                            <div class="block_coupon_right-fake block_coupon_right-after"></div>
                        
                            <div class="block_coupon_title">Coupon name</div>
                            <div class="block_coupon_time" style='color:{{ section.settings.color_style | replace:replace_str, ".7)" }};'>
                                {% include icon_coupon_time ,{width:'16',height:'16',fill:section.settings.color_style | replace:replace_str, ".5)"} %}
                                <span>2021/05/27 ~ 2021/06/06</span>
                            </div>
                            <div class="block_coupon_code"  data-clipboard-text="HUWEIOO596-6584" style="cursor: pointer;background-color: {{ section.settings.color_style }};">
                                <span>HUWEIOO596-6584</span>
                                {% include icon_coupon_copy ,{width:'16',height:'16'} %}
                            </div>
                        </div>
                    </div>
                </li>
                {% endif %}
                {% endfor %}

                {% else %}
                <li>
                    <div class="block_coupon_content"  style='border: 1px solid {{ section.settings.color_style | replace:replace_str, ".2)" }};background: {{ section.settings.color_style | replace:replace_str, ".04)" }};color: {{ section.settings.color_style }};--border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }}'>
                        
                        <div class="block_coupon_left"><span>50%</span> OFF</div>
                        <div class="block_coupon_right" style='border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }};'>

                            <div class="block_coupon_right-fake block_coupon_right-before"></div>
                            <div class="block_coupon_right-fake block_coupon_right-after"></div>
                        
                            <div class="block_coupon_title">Coupon name</div>
                            <div class="block_coupon_time" style='color:{{ section.settings.color_style | replace:replace_str, ".7)" }};'>
                                {% include icon_coupon_time ,{width:'16',height:'16',fill:section.settings.color_style | replace:replace_str, ".5)"} %}
                                <span>2021/05/27 ~ 2021/06/06</span>
                            </div>
                            <div class="block_coupon_code"  data-clipboard-text="HUWEIOO596-6584" style="cursor: pointer;background-color: {{ section.settings.color_style }};">
                                <span>HUWEIOO596-6584</span>
                                {% include icon_coupon_copy ,{width:'16',height:'16'} %}
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="block_coupon_content"  style='border: 1px solid {{ section.settings.color_style | replace:replace_str, ".2)" }};background: {{ section.settings.color_style | replace:replace_str, ".04)" }};color: {{ section.settings.color_style }};--border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }}'>
                        
                        <div class="block_coupon_left"><span>50%</span> OFF</div>
                        <div class="block_coupon_right" style='border-color:{{ section.settings.color_style | replace:replace_str, ".2)" }};'>

                            <div class="block_coupon_right-fake block_coupon_right-before"></div>
                            <div class="block_coupon_right-fake block_coupon_right-after"></div>
                        
                            <div class="block_coupon_title">Coupon name</div>
                            <div class="block_coupon_time" style='color:{{ section.settings.color_style | replace:replace_str, ".7)" }};'>
                                {% include icon_coupon_time ,{width:'16',height:'16',fill:section.settings.color_style | replace:replace_str, ".5)"} %}
                                <span>2021/05/27 ~ 2021/06/06</span>
                            </div>
                            <div class="block_coupon_code"  data-clipboard-text="HUWEIOO596-6584" style="cursor: pointer;background-color: {{ section.settings.color_style }};">
                                <span>HUWEIOO596-6584</span>
                                {% include icon_coupon_copy ,{width:'16',height:'16'} %}
                            </div>
                        </div>
                    </div>
                </li>
                
                {% endif %}
            </ul>
        </div>
    </div>
</div>
<script type="text/javascript">

$(function() {
  var clipboard = new ClipboardJS('.block_coupon_code');
    clipboard.on('success', function(e) {
        moi.alertInfo({content:"{{lang.coupon.copy_success}}"})
        oemcartCouponRecord && oemcartCouponRecord(e.text)
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
})
</script>



{% schema %}
{
	"tag": "section",
	"class": "block_coupon",
	"is_global": false,
	"name": {
		"zh_CN": "优惠券",
		"en_US": "Coupons"
	},
	"max_blocks": "10",
	"settings": [
		{
			"type": "card_header",
			"label": {
				"zh_CN": "设置",
				"en_US": "Settings"
			}
		},
		{
			"type": "card_input",
			"id": "title",
			"label": {
				"zh_CN": "标题",
				"en_US": "Title"
			},
			"placeholder": {
				"zh_CN": "请输入标题",
				"en_US": "Please enter title"
			},
			"default": "Latest Product Coupons"
		},
		{
			"type": "card_text_editor",
			"id": "detail",
			"label": {
				"zh_CN": "简短描述",
				"en_US": "Short description"
			},
			"placeholder": {
				"zh_CN": "请输入描述",
				"en_US": "Please enter a description"
			},
			"default": "You are welcome to visit our store,the following are the coupons that can be used to purchase product in our store,you can receive and use it."
		},
		{
			"type": "card_header",
			"label": {
				"zh_CN": "风格设置",
				"en_US": "Style Settings"
			}
		},
		{
			"type": "card_color",
			"label": {
				"zh_CN": "主题颜色",
				"en_US": "Theme color"
			},
			"show-alpha": "false",
			"color-format": "rgb",
			"default": "rgba(0,0,0,1)",
			"id": "color_style"
		}
	],
	"blocks": [
		{
			"name": {
				"zh_CN": "优惠券",
				"en_US": "Coupons"
			},
			"type": "coupons-items",
			"settings": [
				{
					"type": "card_coupon",
					"label": {
						"zh_CN": "优惠券",
						"en_US": "Coupons"
					},
					"default": {
						"id": "",
						"title": ""
					},
					"id": "coupon"
				}
			]
		}
	],
	"default": {
		"settings": {
			"title": "Coupons",
			"detail": "Copy a coupon code below and apply it when checkout",
			"color_style": "rgba(29,31,33,1)"
		},
		"blocks": [
			{
				"coupon": {
					"id": "",
					"title": ""
				},
				"block_type": "coupons-items"
			}
		]
	},
	"icon": "icon-youhuiquan"
}
{% endschema %}